<template>
  <div class="good-item">
    <img :src="gdata.img1" alt="" @click="handleDetail" />
    <h3>
      <van-text-ellipsis rows="1" :content="gdata.proname" />
    </h3>
    <h4>
      <van-text-ellipsis rows="2" :content="gdata.desc" />
    </h4>
    <p>￥{{ gdata.originprice }}</p>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from "vue-router";
import { ProductType } from "../types/prod";
const router = useRouter();

interface GoodItemPropsType {
  gdata: ProductType;
}
const props = defineProps<GoodItemPropsType>();

const handleDetail = () => {
  router.push({
    path: "/detail",
    query: {
      ...props.gdata,
    },
  });
};
</script>

<style scoped>
.good-item {
  width: 34.5rem;
  height: 50rem;
  /* background-color: orange; */
  margin-bottom: 2rem;
}
.good-item img {
  height: 26rem;
  width: 100%;
  background-color: #d8d8d8;
}
.good-item h3 {
  font-size: 2.6rem;
}
.good-item h4 {
  font-size: 2.2rem;
}
.good-item p {
  font-size: 2.4rem;
}
</style>
